<template>
  <div class="tab_container">
    <div class="list_item">
      <div class="list_item_title"
           v-if="info.features && info.features.searchable"
           v-text="info.features.searchable.description"></div>
      <div class="list_item_keywords"
           v-if="info.features && info.features.searchable">
        <div class="keywords_item"
             v-for="(item, index) in info.features.searchable.cmds"
             :key="index"
             v-text="item"
             @click="gotoPlugin(item)"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabKeywords',
  props: {
    info: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    gotoPlugin (data) {
      let cmds = JSON.parse(JSON.stringify(this.info.features.searchable.cmds))
      cmds = cmds.sort(item => (item == data) ? -1 : 1)
      // console.log('...2...', cmds, Object.assign({}, this.info, {
      //   urlParams: {
      //     tab: 'Plugins'
      //   },
      //   features: {
      //     searchable: Object.assign({}, this.info.features.searchable, {
      //       cmds: cmds
      //     })
      //   }
      // }))
      bbtools.send('render-plugin', {
        pluginInfo: Object.assign({}, this.info, {
          urlParams: {
            tab: 'Plugins'
          },
          features: Object.assign({}, this.info.features, {
            searchable: Object.assign({}, this.info.features.searchable, {
              cmds: cmds
            })
          })
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../../../themes/index.less");
.tab_container {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  overflow-y: auto;
  .list_item {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid @darkDividerColor;
  }
  .list_item_keywords {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
    .keywords_item {
      padding: 4px 10px;
      border-radius: 30px;
      margin-right: 8px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background-color: @primaryColor;
      color: #fff;
    }
  }
}
</style>